<template>
  <div>
    <van-nav-bar class="replyheader"
      :title="`${replycommentCount}条回复`"
      left-text="返回"
    >
    <template #left>
    <van-icon name="cross" @click="iconClosepopup"/>
    </template>
    </van-nav-bar>
    <commentItem :commentList="commentObj" :isshow="false"/>
    <!-- 评论楼中楼 -->
    <van-cell title="所有回复"></van-cell>
    <!-- 这里复用 commentlist 组件抽风,一直注册不上,只能使用全局注册-->
    <commentlist :articleObj="articleObj" type="c" :source="commentObj[0].com_id"/>
    <!-- 对评论进行评论 -->
      <van-cell-group inset class="repltBottom">
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入评论内容"
          show-word-limit
        />
        <van-button class="btn" type="default" :disabled="message.length == 0" @click="addComment">发布</van-button>
      </van-cell-group>
  </div>
</template>
<script>
  import commentItem from './commentItem.vue'
  import { addCommetApi,detailApi } from '@/api/index.js'
export default {
  name: 'reply',
  props: ['commentObj','replycommentCount'],
  data() {
    return {
      message: '',
      articleObj:{} // 存放文章详情信息
    }
  },
  mounted(){
    this.getDetail()
    console.log(this)
  },
  methods: {
    // 点击评论框的发表按钮发表新评论的事件
    async addComment(){
      try{
        let {data:res} = await addCommetApi({
          article_id: this.commentObj[0].com_id ,
          content:this.message,
          art_id: this.$route.query.article_id
        })
      console.log(res)
      // 这里只能保证评论数据新增到后台和页面渲染出来,但是评论徽标不是最新的
        this.$notify({ type: 'success', message: '回复评论成功' });
        this.message = ''
        // 回复成功评论数 + 1
        this.commentObj[0].reply_count++
        this.iconClosepopup()
      }catch(e){
        console.log(e)
      }
    },
    // 获取文章详情api
    async getDetail(){
     try{
       let {data:res} = await detailApi(this.$route.query)
       this.articleObj = res.data
       console.log(res)
     }catch(e){
       console.log(e)
     }
    },
    iconClosepopup(){
      this.$emit('iconClosepopup',false)
    }
  },
  components: {
    commentItem,
  }
}
</script>
<style lang="less" scope>
.repltBottom {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100%;
}
 .btn {
       height: 68px;
         border: none;
         background-color: red;
         white-space: nowrap;
             text-align: center;
       }
</style>
